<template>
  <sub-page class="createActivity">
    <title-header title="信息修改"></title-header>
    <main-card >
      <!-- <div class="title">- 活动创建流程指导 -</div>
      <my-steps :active="active">
        <el-step title="创建活动"></el-step>
        <el-step title="正式使用"></el-step>
        <el-step title="查看数据"></el-step>
      </my-steps> -->
      <create-step1 />
      <el-divider></el-divider>
      <my-tip-bar color-style="blue">
        为了您的互动体验更流畅，请使用chrome浏览器进行互动
        <a :href="downloadURL" class="blue-text" target="_blank">立即下载</a>
      </my-tip-bar>
      <my-tip-bar color-style="yellow">
        点击查看使用帮助，简易连接大屏电脑的网络单独提供（如4g热点），不要与现场混在一起，以免现场用户太多导致网络拥堵，从而影响现场效果
      </my-tip-bar>
    </main-card>
  </sub-page>
</template>

<script>
import TitleHeader from '@/layout/home/components/header/titleHeader';
import SubPage from '@/components/subPage';
import MainCard from '@/components/mainCard';
import CreateStep1 from '@/views/homeViews/myActivity/create-step1';
import MyTipBar from '@/components/myTipBar';

const macUrl = 'https://ustatic.joymew.com/browsers/googlechromeSetupMacos.dmg';
const osUrl = 'https://ustatic.joymew.com/browsers/ChromeStandaloneSetup64.exe';
export default {
  name: 'createActivity',
  components: { MyTipBar, CreateStep1, MainCard, SubPage, TitleHeader },
  mounted() {},
  data() {
    return {
      active: 0,
      downloadURL: osUrl,
    };
  },
  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    // 不同系统浏览器下载
    generateDownloadURL() {
      const version = navigator.userAgent.toLowerCase();
      const mac = version.indexOf('mac');
      const os = version.indexOf('os');
      if (mac > 0 && os > 0) {
        // 苹果系统下执行的操作
        this.downloadURL = macUrl; // 这里的请求方式为get，如果需要认证，接口上需要带上token
      } else {
        this.downloadURL = osUrl; // 这里的请求方式为get，如果需要认证，接口上需要带上token
      }
      console.log(this.downloadURL);
    },
  },
  created() {
    this.generateDownloadURL();
  },
};
</script>

<style lang="less" scoped>
// .createActivity {
//   .main-card {
//     padding: 10px;
//     .title {
//       margin: auto;
//       margin-bottom: 10px;
//       margin-top: 18px;
//       font-size: 20px;
//       font-weight: 500;
//       color: #1890ff;
//       line-height: 27px;
//     }
//   }
//   .my-steps {
//     width: 90%;
//     max-width: 760px;
//     margin: auto;
//     margin-top: 25px;
//     margin-bottom: 22px;
//   }
//   .my-tip-bar {
//     margin-left: 55px;
//   }
// }
.createActivity::v-deep {
  .el-divider--horizontal {
    margin-top: 0;
  }
}
</style>
